<template>
  <div class="login-wrapper">
    <div class="login-form-wrapper">
      <!-- 加载动画 -->
      <loading :value="isShowLoading"></loading>
      <!-- 登陆页面设置 -->
      <div class="login-setting">
        <div class="login-setting-icon" @click="isShowSetting = true">
          <svgIcon slot="prefix" :name="'icon-shezhi'" :size="20"></svgIcon>
        </div>
      </div>
      <div class="login-form-content">
        <div class="login-logo">LOGIN in</div>
    <!-- <el-input type="number"></el-input> -->

        <el-select v-model="selTypeVal" placeholder="请选择">
          <el-option
            v-for="item in settingList"
            :key="item.id"
            :label="item.title"
            :value="item.type"
            @change="changeLoginTypeFn"
          >
            <span style="float: left">{{ item.title }}</span>
          </el-option>
        </el-select>
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="用户名" prop="username">
            <!-- <svgIcon :name="'bianzubeifen'" :size="30"></svgIcon> -->
            <el-input
              type="primary"
              v-model="ruleForm.username"
              autocomplete="off"
            >
              <svgIcon
                slot="prefix"
                :name="'icon-bianzubeifen3'"
                :size="20"
              ></svgIcon>
            </el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <!-- <svgIcon :name="'bianzubeifen4'" :size="30"></svgIcon> -->

            <el-input
              type="password"
              v-model="ruleForm.password"
              autocomplete="off"
            >
              <svgIcon
                slot="prefix"
                :name="'icon-bianzubeifen2'"
                :size="20"
              ></svgIcon>
            </el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="checkCode">
            <!-- <svgIcon :name="'yanzhengma'" :size="30"></svgIcon> -->

            <el-input v-model.number="ruleForm.checkCode">
              <svgIcon
                slot="prefix"
                :name="'icon-yanzhengma'"
                :size="20"
              ></svgIcon>
            </el-input>
          </el-form-item>
          <el-form-item>
            <!-- <el-button type="text" class="" @click="resetForm('ruleForm')">忘记密码？</el-button> -->
            <el-button
              type="primary"
              class="login-btn"
              @click="submitForm('ruleForm')"
              >登&nbsp;&nbsp;&nbsp;&nbsp;录</el-button
            >
          </el-form-item>
        </el-form>
        <div class="flex-cc other-btn">
          <div class="sign-forget">
            <svgIcon :name="'icon-bangzhu-xianxing'" :size="14"></svgIcon>
            <el-button type="text">忘记密码</el-button>
          </div>
          <div class="sign-forget">
            <svgIcon :name="'icon-yaoqing'" :size="14"></svgIcon>
            <el-button type="text">去注册</el-button>
          </div>
        </div>
      </div>
      <div class="login-third-party">
        <el-row>
          <el-col>
            <div class="flex-cc party-title">---第三方登录---</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col
            v-for="item in thirdPartyList"
            :span="Math.floor(24 / thirdPartyList.length)"
            :key="item.value"
          >
            <svgIcon :name="item.name" :size="20"></svgIcon>
          </el-col>
        </el-row>
      </div>

      <!-- 滑块验证 -->
      <div class="check-code-img" v-if="isShowSlider">
        <sliderVerifyCom @close="toCloseSliderFn" />
      </div>
    </div>
    <!-- 登陆设置弹窗 -->
    <div class="login-set-model">
      <loginSettingCom :isShow="isShowSetting" />
    </div>
  </div>
</template>

<script>
import { loginSetting } from "../../api/json/index";
import sliderVerifyCom from "../../components/sliderVerifyCom"; //滑块验证组件
import loginSettingCom from "../../components/loginSettingCom.vue"; //登录配置组件

import accPassLogin from "./components/accPassLogin"; //账号密码登录
import scanCodeLogin from "./components/scanCodeLogin"; //扫码登录
import telphoneLogin from "./components/telphoneLogin"; //手机号验证登录
export default {
  name: "loginPage",
  components: {
    sliderVerifyCom,
    loginSettingCom,
    accPassLogin,
    scanCodeLogin,
    telphoneLogin,
  },
  data() {
    var checkCode = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("验证码不能为空"));
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      }
    };
    var validateUser = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      }
    };
    return {
      selTypeVal: "1",
      ruleForm: {
        username: "",
        password: "",
        checkCode: "",
        settingList: [],
      },
      rules: {
        username: [{ validator: validateUser, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
        checkCode: [{ validator: checkCode, trigger: "blur" }],
      },
      thirdPartyList: [
        { name: "icon-wechat", value: "1" },
        { name: "icon-whatsapp", value: "2" },
        { name: "icon-twitter", value: "3" },
        { name: "icon-facebook", value: "4" },
        { name: "icon-apple", value: "5" },
        { name: "icon-qq", value: "6" },
        { name: "icon-email", value: "7" },
      ],
      isShowLoading: false,
      isShowSlider: false,
      isShowSetting: false,
    };
  },
  created() {
    this.settingList = loginSetting;
  },
  mounted() {},
  methods: {
    changeLoginTypeFn(val) {
      console.log("changeLoginTypeFn", val);
      this.selTypeVal = val;
    },
    toCloseSliderFn() {
      this.isShowSlider = false;
    },
    submitForm(formName) {
      console.log(formName,this.$refs[formName])
      // this.isShowSlider = true;
      // this.$router.replace('/homePage')

      this.$refs[formName].validate((valid) => {
        console.log(valid)
        if (valid) {
          // alert("submit!",valid);
          this.$router.replace("/homePage");
        } else {
          console.log("error submit!!", valid);
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.login-logo {
  font-size: 40px;
  color: #29c2ff;
  text-shadow: 1px -1px hsl(0, 0%, 100%), -1px 1px #6c82aa, -6px 6px 5px #355185;
  font-family: "CrotahFreeVersionItalic";
  width: 100%;
  text-align: center;
  margin: 0px 0 30px 0;
}
.login-wrapper {
  width: 100vw;
  height: 100vh;
}
.login-form-wrapper {
  width: 20%;
  min-width: 350px;
  // height: 50%;
  background-color: rgba($color: #555, $alpha: 0.6);
  position: absolute;
  top: 50%;
  right: 15%;
  transform: translateY(-50%);
  box-sizing: border-box;
  padding: 50px 30px;
  border-radius: 8px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
}
.el-form-item__label {
  color: #fff;
}
.check-code-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sign-forget {
  display: flex;
  align-items: center;
}
.login-third-party {
  .el-row {
    display: flex;
    align-items: center;

    justify-content: space-between;
  }
}
.other-btn {
  justify-content: space-between;
  margin: 10px 0;
}
.party-title {
  color: #409eff;
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 15px;
}
// 登陆设置样式
.login-setting {
  position: absolute;
  right: 15px;
  top: 15px;
  cursor: pointer;
  &-icon {
  }
}
</style>
